<template>
	<view class="p20">
		<up-search placeholder="搜素" @change="search" v-model="data.keyword"></up-search>
		<!-- <view class="line">
			<up-tabs :list='data.tabs' lineColor='transparent' :scrollable="false"
				activeStyle='font-weight: bold;color:rgb(238,182,99)'></up-tabs>
		</view> -->
		<view class="pb20 mt40" v-if='data.pagination.data.length > 0'>
			<view class="list d-b-c f-w pl30 pr30">
				<view class="item mb10" v-for="(item, index) in data.pagination.data" :key="index"
					@click="store.commit('jump', `/pages/detail/detail?id=${item.id}`)">
					<view class="img d-c-c">
						<image :src="item.image" mode="widthFix"></image>

					</view>
					<view class="bg-white p20">
						<view class="name f28" style="margin-top: 10rpx;">{{ item.title }}</view>
						<view class="subs f22 mt10">{{ item.sub }}</view>
					</view>
				</view>
			</view>
			<uni-load-more v-if="data.pagination.total > 0" :status="data.loadStatus" :content-text="{
				contentdown: '点击查看更多',
			}" @tap="loadmore" />
		</view>
		<up-empty marginTop="5vh" mode="list" v-else></up-empty>
	</view>
</template>

<script setup>
import { reactive } from 'vue'
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { useStore } from "vuex"
const store = useStore()
const data = reactive({
	pagination: {
		data: [],
		current_page: 1,
		total: 1,
		last_page: 1,
	},
	loadStatus: '',
	tabs: [{
		name: "综合"
	}, {
		name: "新品"
	}, {
		name: "销量"
	}, {
		name: "价格"
	}],
	status: "loadmore",
	list: [{
		name: "马可波罗全抛釉砖",
		sub: '90PW G55',
		tags: ['多规格', '多颜色'],
		img: '@/static/image/icon3.png'
	}, {
		name: "马可波罗全抛釉砖",
		sub: '90PW G55',
		tags: ['多规格', '多颜色'],
		img: '@/static/image/icon3.png'
	}, {
		name: "马可波罗全抛釉砖",
		sub: '90PW G55',
		tags: ['多规格', '多颜色'],
		img: '@/static/image/icon3.png'
	}, {
		name: "马可波罗全抛釉砖",
		sub: '90PW G55',
		tags: ['多规格', '多颜色'],
		img: '@/static/image/icon3.png'
	}, {
		name: "马可波罗全抛釉砖",
		sub: '90PW G55',
		tags: ['多规格', '多颜色'],
		img: '@/static/image/icon3.png'
	}],
	keyword:''
})
function search(item) {
	data.pagination = {
		data: [],
		current_page: 1,
		total: 1,
		last_page: 1,
	};
	getGoodsList()
}
async function getGoodsList(page = 1, list_rows = 6) {
	data.loadStatus = 'loading';
	const res = await store.dispatch('request', {
		url: store.state.api.goods.index,
		data: {
			keyword: data.keyword,
			list_rows,
			page,
		}
	})
	if (res.code == 1) {
		let couponList = data.pagination.data.concat(res.data.data);
		data.pagination = {
			...res.data,
			data: couponList,
		};

		if (data.pagination.current_page < data.pagination.last_page) {
			data.loadStatus = 'more';
		} else {
			data.loadStatus = 'noMore';
		}
	}

}
// 加载更多
function loadmore() {
	if (data.loadStatus !== 'noMore') {
		getGoodsList(
			data.pagination.current_page + 1,
		);
	}
}
onReachBottom(() => {
	loadmore();
});
onLoad((option) => {
	data.current = option.id
})
</script>

<style scoped lang="scss">
.list {
	.item {
		border: 1px solid #ccc;
		width: calc(50% - 5rpx);

		.img {
			height: 200rpx;
			position: relative;

			image {
				// width: 100rpx;
			}

			.tags {
				position: absolute;
				bottom: 20rpx;
				left: 10rpx;
			}
		}

		.subs {
			color: #FBE5CB;
		}
	}
}
</style>